js的事件循环

#####js单线程、同步、异步

js引擎是单线程的,主线程中的任务一个个排队执行(同步,串行执行任务),当遇到ajax请求,setTimeout和DOM事件的用户交互等延时任务时,中间会出现空等状态,低效,因此出现了异步,通过将任务交给相应的异步模块去处理,主线程继续往下执行其他操作。当异步任务完成,主线程空闲时,主线程去执行对应的callback。

js事件处理流程
  1. 主线程读取JS代码,同步执行任务,当遇到异步任务时,将其出栈放到对应的异步进程处理(Web Apis)

  2. 异步进程处理完毕(ajax返回,DOM事件触发,setTimeout时间到等),将对应的回调函数推入到任务列队中

  3. 主线程同步任务执行完毕后,查询任务列队

    • 先按顺序执行microtask queue

      1
      主要是promise函数,promise函数的第一个参数是在当前任务直接执行,不会放入队列任务之中;promise的回调函数是异步执行的then方法里的参数
    • microtask queue执行完之后,再按顺序执行macrotask queue

  4. 重复过程3(事件循环event loop)

国外大牛把整个过程视觉化了